<template>
    <div class="home" v-loading="getLoading">
        <!-- 地图 start -->
        <div :id="getMapId" class="map-container"></div>
        <!-- 地图 end -->

        <!-- 工具栏 start -->
        <ToolbarCom :mapGis="mapGis" />
        <!-- 工具栏 end -->
    </div>
</template>

<script>
import ToolbarCom from '@/components/ToolbarCom.vue';
import { mapGetters } from 'vuex';

export default {
    name: 'Home',
    components: {
        ToolbarCom,
    },
    data() {
        return {
            mapGis: null,
            timer: null,
        };
    },
    computed: {
        ...mapGetters([
            'getLoading',
            'getMapId',
            'getItemName',
            'getMapName',
            'getExtent',
            'getGroup',
            'getAreaConfig',
            'getUserAreaCode',
        ]),
    },
    mounted() {
        this.timer = setInterval(() => {
            if (typeof GIS === 'object') {
                console.log('GIS======>', GIS);
                clearInterval(this.timer);
                this.initMap();
            }
        }, 50);
    },
    methods: {
        async initMap() {
            this.mapGis = GIS.Init.initMap(this.getMapId, this.getItemName, this.getMapName, () => {
                GIS.Extent.ZoomToArea(this.getMapId, this.getUserAreaCode);
                GIS.Graphic.drawBoundary(this.getMapId, 'boundaryLayerId', this.getUserAreaCode, {strokeStyle: 'rgb(56,117,228)', lineWidth: 3});
            }, this.getExtent, this.getGroup, this.getAreaConfig);
            window.mapGis = this.mapGis;
        }
    }
}
</script>

<style lang="less" scoped>
.home {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .map-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: transparent;
    }
}
</style>
